import React,{Component} from 'react'
import {Icon,Modal} from 'antd'
const {confirm} = Modal
export default class Payfor extends Component{
    constructor(props){
        super(props)
        this.state={
            sumPrice:0,
            defaultStyle:''
        }
    }
    componentWillMount(){
        let arr = JSON.parse(localStorage.getItem('product'))
        let sum = 0;
        arr.map(v=>{
            sum += v.quantity*v.product.price
        })
        this.setState({
            sumPrice:sum
        })
    }
    sel(index){
        let els = document.getElementsByClassName('payImg')
        console.log(els[index])
        console.log(els)
        this.setState({
            defaultStyle:els[index]
        })
        for(let i=0;i<els.length;i++){
            els[i].style.border = '1px solid #aaa'
        }
        els[index].style.border = '1px solid red'
        
    }
    submit(){
        console.log(this.state.defaultStyle)
        let obj = this.state.defaultStyle
        if(!obj){
            console.log('没有选中支付方式')
            Modal.warning({
                title:'温馨提示',
                content:'请选择支付方式'
            })
        }else{
            let _this = this
            confirm({
              title: '温馨提示',
              content: '请确认是否支付',
              onOk() {
                Modal.warning({
                    title:'支付成功',
                    content:'即将跳转页面'
                });
                setTimeout(()=>{
                    _this.props.history.push('./myself')
                },1000)
                  
              },
              onCancel() {
                console.log('Cancel');
              },
            });
        }
    }
    render(){
        let arr = [1,2,3,4,5,1,2,3,4,5,1,2,3,4,5]
        return(
            <div class="payfor">
                <div class="pTop">
                    <Icon type="check-circle" />
                    <dl>
                        <dt>订单已生成，请继续完成支付！</dt>
                        <dd>订单编号：51410707 
                            <span style={{margin:'0 6px 0 28px'}}>支付金额：</span>
                            <span style={{color:"rgb(243, 36, 0)"}}>￥{this.state.sumPrice}</span>
                        </dd>
                    </dl>
                </div>
                <div className='payStyle'>
                    <p style={{marginLeft:'70px'}}>你需要支付：<span style={{color:'rgb(243, 36, 0)'}}>￥{this.state.sumPrice}元</span>，请选择：</p>
                    <div className="pic-wall">
                        {arr.map((v,i)=>{
                            return(
                                <p key={i} className="payImg" onClick={()=>this.sel(i)}>
                                    <img src={`http://118.190.54.193/product/pay_${i+1}.png`} />
                                </p>
                            )
                        })}
                    </div>
                </div>
                <div class="showPay">
                    <span>

                    </span>
                    <span>
                        支付
                    </span>
                    <span style={{color:'rgb(243, 36, 0)'}}>
                        ￥{this.state.sumPrice}
                    </span>
                </div>
                <button onClick={()=>this.submit()} className="payBtn">支付</button>
            </div>
        )
    }
}